<template>
	<div ref="threeWrapRef"></div>
</template>

<script setup>
	import * as THREE from 'three';
import { ref, onMounted } from 'vue';
	const threeWrapRef = ref(null)
	let camera = null
	const initThree = () => {
		// 创建场景
		const scene = new THREE.Scene()
		// 创建相机
		camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight,0.1, 1000)
		// 创建渲染器
		const renderer = new THREE.WebGLRenderer()
		renderer.setSize(window.innerWidth, window.innerHeight)
		threeWrapRef.value.appendChild(renderer.domElement)
		camera.position.set(0,0,0);
		//创建球体
		const metry =  new THREE.SphereGeometry(15, 64,32)
		// 创建加载器
		const loader = new THREE.TextureLoader();
		// 加载图片
		loader.load('/static/tick2.jpg', (texture) => {
			// 创建材质
			const Material = new THREE.MeshBasicMaterial({
				map: texture,
				side: THREE.DoubleSide
			})
			// 把球体和材质合并成一个以加载的图片为材质的球体
			const mesh = new THREE.Mesh(metry, Material)
			// 添加到场景里面
			scene.add(mesh)
			// 渲染
			animate();
		})
		function animate() {
			requestAnimationFrame( animate );
			renderer.render( scene, camera );
		}
		
	}
	console.log(threeWrapRef.value, 'setup')
	onMounted(() => {
		console.log(threeWrapRef.value, 'mounted')
		initThree()
		threeWrapRef.value.addEventListener('touchstart', handleStart)
		threeWrapRef.value.addEventListener('touchmove', handleMove)
	})
	let startX,startY
	const handleStart = (e) => {
		console.log('start', e)
		startX = e.touches[0].clientX
		startY = e.touches[0].clientY
		
	}
	const handleMove = e=> {
		console.log('move', e)
		const curX = e.touches[0].clientX
		const curY = e.touches[0].clientY
		
		const xNum  = curX - startX
		const yNum  = curY - startY
		console.log(xNum)
		// xNum = window.innerWidth
		// rotate = 360
		
		const rotateX = xNum * 10/window.innerWidth
		const rotateY = yNum * 10/window.innerHeight
		
		camera.rotateY(rotateX)
		camera.rotateX(rotateY)
		
		
		
		
		startX = curX
		startY = curY
		
	}
	
	
	
</script>

<style>
	       
</style>
